<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <!--顶部搜索 -->
      <div class="top-operate-default">
        <div class="search-item">
          <label>搜索招募员：</label>
          <el-input v-model="searchListQuery.realname" @keyup.enter.native="handleSearch" placeholder="姓名/手机号"
            style="width: 300px"></el-input>
          <label class="mar-l-20">性别：</label>
          <el-select v-model="gender" placeholder="请选择" @change="handleSearch" class="pad-l-10">
            <el-option v-for="item in genders" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <label class="mar-l-20">状态</label>
          <el-select v-model="statusFlag" placeholder="请选择" @change="handleSearch" class="pad-l-10">
            <el-option v-for="item in statusFlags" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <label class="mar-l-20">业绩筛选：</label>
          <el-date-picker v-model="datePicker" style="margin-left: 10px" type="daterange" unlink-panels
            range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="pad-t-15 pad-b-15">
        <el-button size="mini" plain @click="exportClick">导出Excel</el-button>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" element-loading-text="加载中"
          style="width: 100%" header-cell-class-name="default-header" row-class-name="default-row">
          <el-table-column label="姓名" prop="realname"></el-table-column>
          <el-table-column label="性别" prop="gender">
            <template slot-scope="scope">
              {{ genders[scope.row.gender].label }}
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column label="累计招募(人)" prop="memberCount">
            <template slot-scope="scope">
              <div>店主：{{scope.row.memberCount}}</div>
              <div>团长：{{scope.row.commanderNum}}</div>
            </template>
          </el-table-column>
          <el-table-column label="累计产生订单">
            <template slot-scope="scope">
              <div><span>店主：订单：</span><a style="color: #2d8cf0"
                  @click="recruiterOrder(scope.row)">{{scope.row.orderNum||0}}笔</a>，金额：
                {{scope.row.orderAmount||'0.00'}} 元
              </div>
              <div><span>团长：订单：</span><a style="color: #2d8cf0"
                  @click="recruiterOrder(scope.row)">{{scope.row.commanderOrderNum||0}}笔</a>，金额：
                {{scope.row.commanderOrderAmount||'0.00'}} 元
              </div>
            </template>
          </el-table-column>
          <el-table-column label="累计获得提成">
            <template slot-scope="scope">
              <div>
                店主：<span style="color: red">￥{{ scope.row.recruiterAmount }}</span>
              </div>
              <div>
                团长：<span style="color: red">￥{{ scope.row.recruiterCommanderAmount }}</span>
              </div>
              <!-- <span v-else style="color: red">￥0.00</span> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="searchListQuery.currentPage"
        :limit.sync="searchListQuery.size" @pagination="initDataList" />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .span-member-1 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .span-member-2 {
    margin-right: 10px;
  }

  .user-avatar {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import {
    pagingRecruiterRanking,
    exportRecruiterRanking
  } from '@/api/user/recruiter'

  export default {
    data() {
      return {
        total: 0,
        listLoading: true,
        searchListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          realname: ''
        },
        searchLabelType: '',
        dict: {},
        pagingStatus: '0',
        categoryIds: [],
        dataList: [],
        // 商品的所有分类json
        categoryData: [],
        datePicker: [],
        genders: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
        }],
        gender: '',
        statusFlags: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '正常'
        }, {
          value: '0',
          label: '禁用'
        }],
        statusFlag: ''
      }
    },
    // 初始化页面
    created() {
      const startTime = new Date()
      startTime.setDate(1)
      const endTime = new Date()
      endTime.setMonth(endTime.getMonth() + 1)
      endTime.setDate(0)
      this.datePicker = [this.formatTime(startTime), this.formatTime(endTime)]
      this.initDataList()
    },
    mounted() {},
    methods: {
      // 时间格式化
      formatNumber(n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
      formatTime(date) {
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        return [year, month, day].map(this.formatNumber).join('-') + ' ' + [hour, minute, second].map(this.formatNumber)
          .join(':')
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initDataList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initDataList()
      },
      initDataList() {
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.gender = this.gender
        this.searchListQuery.statusFlag = this.statusFlag
        if (this.datePicker && this.datePicker.length > 0) {
          this.searchListQuery['startTime'] = this.datePicker[0]
          this.searchListQuery['endTime'] = this.datePicker[1]
        } else {
          this.searchListQuery['startTime'] = ''
          this.searchListQuery['endTime'] = ''
        }
        this.listLoading = true
        pagingRecruiterRanking(this.searchListQuery).then(response => {
          if (response.isError) return
          this.listLoading = false
          this.total = response.data.total
          this.dataList = response.data.records
        })
      },
      resetSearch() {
        this.gender = ''
        this.statusFlag = ''
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          realname: ''
        }
        this.datePicker = []
        this.initDataList()
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initDataList()
      },
      exportClick() {
        const entity = {
          enterpriseId: this.getEnterpriseId(),
          realname: this.searchListQuery.realname,
          gender: this.gender,
          statusFlag: this.statusFlag,
          startTime: this.datePicker[0],
          endTime: this.datePicker[1]
        }
        window.open(exportRecruiterRanking(entity), '_blank')
      },
      recruiterOrder(row) {
        if (this.datePicker.length > 1) {
          const startTime = this.datePicker[0].substring(0, 10) + ' 00:00:00'
          const endTime = this.datePicker[1].substring(0, 10) + ' 23:59:59'
          this.datePicker = [startTime, endTime]
        }
        this.$router.push({
          path: '/order/order/index',
          query: {
            recruiterId: row.recruiterId,
            orderStatus: '80',
            startEndTime: this.datePicker,
            timeCol: 'payTime',
            showStatOrder: '0'
          }
        })
      }
    }
  }
</script>
